<template>
	<view class="uiwu">
		<view class="uiwu-goods uiwu-flex-align">
			<image :src="info.img || info.product_image" mode="aspectFill"></image>
			<view class="in">
				<view class="title uiwu-hidden1">{{info.name || info.product_name}}</view>
				<view class="tips">抓取时间：{{uiwu.formatTimestamp(info.add_time * 1000)}}</view>
				<view class="tips">机器编号：XF2780</view>
				<view class="tips uiwu-flex-space">
					申诉状态：{{info.appeal_state == 1 ? '审核中' : info.appeal_state == 2 ? '申诉成功' : info.appeal_state == 3 ? '申诉驳回' : ''}}
					<navigator :url="`/pages/index/record?device_id=${info.device_id}`" hover-class="none" class="uiwu-flex-center">其他记录</navigator>
				</view>
			</view>
		</view>
		<view class="uiwu-tips">申诉理由</view>
		<view class="uiwu-form">
			<radio-group @change="changeRadio">
				<view class="radio-group uiwu-flex-column">
					<label v-for="(item,index) in stor_reason" :key="index">
						<radio color="#EF821E" style="transform: scale(0.8);" :value="item" /><text>{{item}}</text>
					</label>
				</view>
			</radio-group>
			<textarea v-model="fromData.appeal_describe" placeholder="详细描述一下问题，字数限制10-300"></textarea>
			<view class="uiwu-form-title">上传截图/凭证</view>
			<view class="uiwu-form-image uiwu-flex">
				<uiwu-button-update v-for="(item,index) in fromData.appeal_proof" :key="index" @change="changeImage1($event,index)">
					<view class="uiwu-form-image-update uiwu-flex-center">
						<image :src="item.url" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
					</view>
				</uiwu-button-update>
				<uiwu-button-update @change="changeImage">
					<view class="uiwu-form-image-update uiwu-flex-center">
						<image src="/static/updateimage.png" mode="widthFix" style="width: 32rpx;"></image>
					</view>
				</uiwu-button-update>
			</view>
			<view class="uiwu-form-tips">为了帮您更好的解决问题，请务必上传照片</view>
			<view class="uiwu-form-title">温馨提示</view>
			<view class="uiwu-form-text">
				<text v-for="(item,index) in appeal_tips" :key="index">{{item}}<br></text>
			</view>
		</view>
		<uiwu-footer v-if="info.appeal_state == 0 || info.appeal_state == 3">
			<view class="uiwu-footer uiwu-flex-center">
				<view class="uiwu-footer-box uiwu-flex-center" @tap="submit(fromData)">提交</view>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { onNavigationBarButtonTap , onLoad , onUnload } from '@dcloudio/uni-app';
	import { uiwu } from '@/config/config';
	import { appealreason , grabappeal , grablist} from '../../api/api';
	import { ref } from 'vue';
	const stor_reason = ref([]);
	const appeal_tips = ref([])
	const info = ref({})
	const fromData = ref({
		grab_id:'',
		appeal_reason:'',
		appeal_describe:'',
		appeal_proof:[]
	})
	onNavigationBarButtonTap((e)=>{
		uiwu.openWindow('/pages/index/problem')
	})
	const submit = async (e:object) : Promise<any> => {
		if(!e.appeal_reason) return uiwu.toast('请选择申诉的理由')
		if(e.appeal_describe.length < 10) return uiwu.toast('字数不能少于10个字')
		if(e.appeal_describe.length > 300) return uiwu.toast('字数不能大于300个字')
		const result = await grabappeal(e);
		if(!result) return 
		uiwu.toast('提交成功','success')
		setTimeout(()=>{
			uni.navigateBack()
		},500)
	}
	const getappealreason = async () => {
		const { data } = await appealreason();
		stor_reason.value = data.stor_reason;
		appeal_tips.value = data.appeal_tips
	}
	const changeRadio = ({detail:{value}}) => {
		fromData.value.appeal_reason = value 
	}
	const changeImage1 = ({data:{url}},index:number)=>{
		fromData.value.refund_proof[index] = {
			type:'image',
			url
		}
	}
	const changeImage = ({data:{url}}) => {
		fromData.value.appeal_proof.push({
			type:'image',
			url
		})
	}
	uni.$on('complaintCallback',(e)=>{
		info.value = e
		fromData.value.grab_id = info.value.id
	})
	onUnload(()=>{
		uni.$off('complaintCallback')
	})
	onLoad(async({goods,device_id})=>{
		if(!device_id){
			info.value = JSON.parse(goods)
			fromData.value.grab_id = info.value.id
		}else{
			const {data:{data}} = await grablist({
				limit:1,
				device_id:device_id
			})
			if(data.length === 0){
				await uiwu.model({
					title:'温馨提示',
					content:'暂无可申诉的记录，请先玩游戏。'
				})
				uni.navigateBack()
				return
			}
			info.value = data[0]
			console.log(info.value);
			fromData.value.grab_id = info.value.id
		}
		getappealreason()
	})
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
	.uiwu{
		padding: 24rpx;
	}
	.uiwu-goods{
		background-color: #fff;
		padding: 24rpx;
		border-radius: 20rpx;
		image{
			width: 180rpx;
			height: 180rpx;
			border-radius: 16rpx;
		}
		.in{
			flex: 1;
			padding-left: 24rpx;
			.title{
				font-size: 28rpx;
				font-weight: 800;
				color: #231815;
				margin-bottom: 20rpx;
			}
			.tips{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				margin-bottom: 10rpx;
				navigator{
					width: 128rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 2rpx solid #EF821E;
					color: #EF821E;
					line-height: 1;
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.uiwu-tips{
		font-size: 32rpx;
		font-weight: 800;
		color: #231815;
		padding: 21rpx 24rpx;
		&::after{
			content: "（申诉理由提交后不能修改）";
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	.uiwu-form{
		background-color: #fff;
		padding: 24rpx 24rpx 40rpx;
		border-radius: 20rpx;
		.radio-group{
			font-size: 28rpx;
			font-weight: 500;
			color: #444444;
			label{
				margin-bottom: 30rpx;
			}
		}
		textarea{
			width: 100%;
			height: 160rpx;
			background: #F9F9F9;
			border-radius: 16rpx;
			padding: 24rpx;
			font-size: 28rpx;
		}
		&-title{
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
			padding-top: 20rpx;
		}
		&-image{
			padding-top: 20rpx;
			&-update{
				width: 160rpx;
				height: 160rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				overflow: hidden;
				margin:0 5rpx;
			}
		}
		&-tips{
			font-size: 24rpx;
			font-weight: 500;
			color: #EF821E;
			margin-top: 20rpx;
		}
		&-text{
			font-size: 24rpx;
			font-weight: 500;
			color: #444444;
			margin-top: 14rpx;
		}
	}
	.uiwu-footer{
		
		&-box{
			width: 670rpx;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
